<template>
    <div>
    <el-row>
        <el-col :span="21"></el-col>
        <el-col :span="3">
            <el-select v-model="form.groupId" placeholder="请选择所属类目">
                <el-option v-for="item in groupPopOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-col>
    </el-row>
    </div>    
</template>
<script>
import { computed, onMounted } from "vue";
import { fetchDictionaryPopData } from "../api/dict.js";
export default {
    name: "dictSelector",
    setup() {
        // 类目下拉选单
        let groupPopOptions = ref([]);
        let form = reactive({
            groupId: 0,
        });
        let query = reactive({
            groupId: 0,
        })
        /**
         * 调用字典请求方法
         */
        const func_pop_options = () =>{
            fetchDictionaryPopData(query).then((res) => {
                if(res.data.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    groupPopOptions = res.data;
                }
            });
        };
        onMounted(() => {
            func_pop_options();
        });
    }
    return {
        groupPopOptions, form ,func_pop_options
    };
};
</script>
<style scoped>